<template>
  <div class="search-container">
    <el-select
      v-model="searchForm.region"
      placeholder="选择地区"
      clearable
      @change="$emit('on-search')"
    >
      <el-option
        v-for="item in regionOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

    <el-select
      v-model="searchForm.grade"
      placeholder="选择年级"
      clearable
      @change="$emit('on-search')"
    >
      <el-option
        v-for="item in gradeOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

    <el-radio-group
      v-model="searchForm.gender"
      size="small"
      @change="$emit('on-search')"
    >
      <el-radio :label="''">全部</el-radio>
      <el-radio :label="0">未知</el-radio>
      <el-radio :label="1">男</el-radio>
      <el-radio :label="2">女</el-radio>
    </el-radio-group>

    <el-input
      v-model="searchForm.keyword"
      placeholder="姓名或手机号"
      clearable
      class="search-input"
      @keyup.enter.native="$emit('on-search')"
    />

    <div class="search-btn">
      <el-button type="primary" @click="$emit('on-search')">刷新</el-button>
      <el-button type="primary" @click="$emit('reset')">重置</el-button>
    </div>
  </div>
</template>

<script>
import { pTree } from '@/api/commonApi'

export default {
  name: 'StudentSearch',
  props: {
    searchForm: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      gradeOptions: [],
      regionOptions: []
    }
  },
  watch: {
    'searchForm.keyword'(val) {
      if (!val || /^\s*$/.test(val)) {
        return
      }
      this.$emit('on-search')
    }
  },
  created() {
    const gradeOptionArr = ['学前教育', '一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '初一', '初二', '初三', '高一', '高二', '高三', '大一', '大二', '大三', '大四', '成人教育', '其它']
    this.gradeOptions = gradeOptionArr.map(item => {
      return {
        label: item,
        value: item
      }
    })

    pTree().then(res => {
      this.regionOptions = res
    })
  }
}
</script>

<style scoped>
.search-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 15px;
  gap: 20px;
}

.search-btn{
  display: flex;
}

.search-input{
  max-width: 200px;
}

/* 新增性别选择容器样式，使其垂直居中 */
.gender-container {
  display: flex;
  align-items: center;
  height: 100%;
}

/* 调整单选框组的样式，确保与其他输入组件高度一致 */
.gender-container .el-radio-group {
  display: flex;
  align-items: center;
  height: 40px; /* 与其他输入组件高度匹配 */
}

/* 调整单选框之间的间距 */
.gender-container .el-radio {
  margin-right: 15px;
}
</style>
